<template>
  <div id="content"
       class="content-area"
       :style="high">
    <movable-area class="movable-area">
      <movable-view :x="x"
                    :y="y"
                    direction="all"
                    @change="onChange"
                    :style="top"
                    class="movable-view">
        <button @click="showPopup"
                class="cu-btn cuIcon add-btn bg-gradual-blue">
          <text class="cuIcon-add"></text>
        </button>
      </movable-view>
    </movable-area>

    <fui-bottom-popup class="model"
                      :show="show"
                      @close="closePopup">
      <view class="fui-custom__wrap">
        <slot name="default"
              class="operate-btn"></slot>
      </view>
    </fui-bottom-popup>
  </div>
</template>

<script>
export default {
  data () {
    return {
      x: 0,
      y: 0,
      scale: 2,
      old: {
        x: 0,
        y: 0,
        scale: 2
      },
      show: false,
      high: "heigth:100%;",
      top: "top:80%;"
    }
  },
  methods: {
    //调用此方法显示底部弹出层
    showPopup (type) {
      this.show = true
    },
    closePopup (type) {
      this.show = false
    },
    onChange: function (e) {
      this.old.x = e.detail.x
      this.old.y = e.detail.y
    },
  },
  created () {
    // setTimeout(() => {
    //   if (this.height) {

    //     this.high = "height:" + this.height.toString() + "px;";
    //     this.top = "top:400px;"
    //     console.log(this.high, this.top);
    //   }
    // }, 600);
  },
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
/* 自定义内容区样式需自行控制 */
.fui-custom__wrap {
  width: 100%;
  height: 520rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-area {
  position: absolute;
  width: 100%;
  height: 100%;
  font-size: 60px;
  color: #a5e6bd;
  /* top: 81%; */
  /* left: 77%; */
  margin: -20px;
  z-index: 9999;
  pointer-events: none;
}

.add-btn {
  font-size: 40px;
  width: 105rpx !important;
  height: 105rpx !important;
}

.operate-btn {
  width: 80px;
  height: 80px;
  font-size: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 5px;
  position: relative;
  button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}

.movable-view {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  width: 105rpx;
  height: 105rpx;
  //   background-color: #007aff;
  color: #fff;
  position: absolute;
  top: 81%;
  left: 77%;
  pointer-events: auto;
}

.movable-area {
  height: 100%;
  width: 100%;
  /* background-color: #d8d8d8; */
  overflow: hidden;
}

.model {
  pointer-events: auto;
}
</style>